<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="handleOk"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">身份信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">租客姓名:</div>
              <div class="value common-value">{{ rental_house_tenant_info.rentalHouseTenantName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">租客类型:</div>
              <div class="value common-value">
                {{ rental_house_tenant_info.type == 1 ? '主租户 ' : '普通租户' || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="left f1">
              <div class="info-wrap f1">
                <div class="label common-lable">联系电话:</div>
                <div class="value common-value">{{ rental_house_tenant_info.mobile || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">身份证号:</div>
                <div class="value common-value">{{ rental_house_tenant_info.idCard || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">户籍地址:</div>
                <div class="value common-value">
                  <a-tooltip placement="top">
                    <template slot="title">
                      {{ rental_house_tenant_info.residenceDetail || '暂无' }}
                    </template>
                    {{ rental_house_tenant_info.residenceDetail || '暂无' }}
                  </a-tooltip>
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">证件照片:</div>
                <div class="value common-value click-color cursor" @click="werImg('rentalHouseTenantImage')">
                  <img
                    id="rentalHouseTenantImage"
                    style="display: none"
                    :src="imgPrefix + rental_house_tenant_info.rentalHouseTenantImage"
                    :data-original="imgPrefix + rental_house_tenant_info.rentalHouseTenantImage"
                  />
                  查看
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">工作单位:</div>
                <div class="value common-value">{{ rental_house_tenant_info.workUnit || '暂无' }}</div>
              </div>
            </div>
            <div class="right f1 flex">
              <div class="info-wrap f1">
                <div class="label common-lable flex align-center justify-center" style="height: 100%">身份证照片</div>
                <div
                  class="value common-value click-color cursor flex align-center justify-center"
                  style="height: 230px"
                >
                  <img
                    id="image"
                    @click="werImg('image')"
                    :src="imgPrefix + rental_house_tenant_info.image"
                    :data-original="imgPrefix + rental_house_tenant_info.image"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">租房信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">房屋位置:</div>
              <div class="value common-value">
                <a-tooltip placement="top">
                  <template slot="title">
                    {{ rental_contract_info.addressDetail || '暂无' }}
                  </template>
                  {{ rental_contract_info.addressDetail || '暂无' }}
                </a-tooltip>
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">租房时间:</div>
              <div class="value common-value">{{ formatDate(rental_contract_info.beginTime) || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">租期:</div>
              <div class="value common-value">{{ rental_contract_info.leaseTerm || '暂无' }}个月</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">月租:</div>
              <div class="value common-value">{{ rental_contract_info.rentalRent || '暂无' }}元/月</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">租房用途:</div>
              <div class="value common-value">
                {{ getDictType(rental_use, rental_contract_info.rentalUse) }}
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">租房合同:</div>
              <div class="value common-value click-color cursor" @click="jump_contract_detail(rental_contract_info)">
                查看
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">同住人员:</div>
              <div class="value common-value">
                {{ rental_house_tenant_info.cohabitCount }}人
                <span class="click-color cursor" @click="open_detail_modal">前往查看</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
    <detail-dialog ref="detailDialog"></detail-dialog>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { ajaxGetDictItems } from '@/api/api'
import detailDialog from '@/views/rental/modules/detailDialog'
export default {
  name: 'detailModal',
  components: { publicModal, detailDialog },
  mixins: [comMethods],
  data() {
    return {
      publicVisible: false,
      records: {},
      rental_contract_info: {}, // 	合同信息
      rental_house_tenant_info: {}, // 租户信息

      rental_use: [],
    }
  },

  methods: {
    async show(records) {
      this.publicVisible = true
      this.records = records
      this.get_house_history_tenant_list(records.id, records.type)
      this.get_dict()
    },

    /**
     * @description 获取主租人详情
     * @param {number} id
     */
    async get_house_history_tenant_list(id, type) {
      let {
        result: { rentalHouseTenantInfo, rentalContractInfo },
      } = await getAction('/rental/house_tenant/detail', { id, type })
      this.rental_contract_info = rentalContractInfo // 	租户信息
      this.rental_house_tenant_info = rentalHouseTenantInfo // 合同信息
    },

    async get_dict() {
      let { result: rental_use } = await ajaxGetDictItems({ code: 'rental_use' })
      this.rental_use = rental_use
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    /**
     * @description 格式化日期时间字符串，只保留日期部分。
     * @param {string} dateTimeString - 日期时间字符串
     * @returns {string} 格式化后的日期字符串
     */
    formatDate(dateTimeString) {
      if (!dateTimeString) {
        return ''
      }
      let datePart = dateTimeString.split(' ')[0]
      datePart = datePart.split('/')[0] + '年' + datePart.split('/')[1] + '月' + datePart.split('/')[2] + '日'
      return datePart
    },

    jump_contract_detail(rental_contract_info) {
      this.$router.push({ path: '/rental/modules/contractDetail', query: rental_contract_info })
    },

    open_detail_modal() {
      this.$router.push({
        path: '/rental/modules/detailModel',
        query: {
          id: this.rental_house_tenant_info.rentalHouseId,
          type: this.rental_house_tenant_info.rentalHouseType,
          mainId: this.records.mainId,
          isShowRightCard: true,
        },
      })
    },
    handleOk() {
      this.publicVisible = false
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
</style>
